<template>
  <div>
    <common-head title="商品详情" class="title"></common-head>
    <!-- 轮播 -->
    <div class="con">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="image in detail.pics" :key="image.id">
          <img :src="image.pic" />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品 介绍-->
      <div class="introduce" v-if=" detail.basicInfo">
        <!-- 商品价格 -->
        <div class="de-con">
          <div class="money">
            {{ detail.basicInfo.minPrice | currency}}
          </div>
          <!-- 商品 名称 -->
          <h5>{{detail.basicInfo.name}}</h5>
          <p class="quit">享退货运费险</p>
        </div>
          <!-- 杂项 -->
       <van-cell title="开通会员可以更优惠哦" is-link value="查看详情" />
       <van-cell :title=detail.basicInfo.tags is-link value="立即领劵" />
        <div class="content" v-html="detail.content">

        </div>
      </div>
    </div>

    <!-- 加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="返回首页" @click="$router.push('/home')" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"
        :badge="items.length?items.length:''" />
      <van-goods-action-icon :icon="falg?'star':'star-o'" :class="{gray:!falg}" :text="falg?'已收藏':'收藏'"
        :color="falg?'#ff5000':'#323233'" @click="clickCollect" />
      <van-goods-action-button type="warning" text="加入购物车" @click="isShow(0)" />
      <van-goods-action-button type="danger" text="立即购买" @click="isShow(1)" />
    </van-goods-action>

    <!-- 点击加入购物车，显示商品信息 -->
    <van-popup closeable round v-model="show" position="bottom" :style="{ height: '45%' }">
      <div class="content">
        <van-card :num="sku.num" :price="sku.minPrice" :desc="sku.characteristic" :title="sku.name" :thumb="sku.pic">
          <template #footer>
            <van-stepper v-model="sku.num" theme="round" button-size="22" disable-input />
          </template>
        </van-card>
      </div>
      <van-button round type="primary" size="large" color="#f66" @click="clickEnter">确定</van-button>
    </van-popup>

  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchItmDetail } from "@api"
import { currency } from '@filters'
import { Notify } from 'vant'
import { mapState, mapActions, mapMutations } from 'vuex'
import { Toast } from 'vant'


export default {
  data () {
    return {
      detail: {},
      show: false,
      // 商品规格
      sku: {
        num: 1, // 表示商品初始值 在自增自减里面初始值是 1
        isChecked: true
      },
      falg: true,
      action: 0 // 0:加入购物车       1:立即购买
    }
  },
  filters: {
    currency
  },
  created () {
    this.fetchDetail()
  },
  components: {
    CommonHead,
  },
  methods: {
    isShow (action) {
      this.show = true
      this.action = action
    },
    fetchDetail () {
      fetchItmDetail(this.$route.params.id).then(res => {
        if (res.data.code === 0) {
          this.detail = res.data.data
          console.log();
          this.sku = {
            ...res.data.data.basicInfo, // 加上 请求过来的商品规格
            ...this.sku // 加上自己原有的 商品 num
          }
        }
      })
    },
    // 优化收藏图标
    clickCollect () {
      this.falg = !this.falg
    },
    // 点击 加入购物车/立即购买 弹出 提示层的商品操作
    clickEnter () {
      if (this.action) {
        // 立即购买 
        // 生成订单数据
        let contact = {}
        if (this.contacts.length > 0) {
          // 说明联系人列表不为空
          let defaultContact = this.contacts.find(el => el.isDefault)
          if (defaultContact) {
            // 有默认联系人
            contact = defaultContact
          } else {
            // 没有默认联系人，则就选择列表中的第一个
            contact = this.contacts[0]
          }

        }
        const newOrder = {
          code: Date.now(), // 订单编号
          items: [this.sku], // 订单商品 需要的注意的是，在购物车人家是直接传递的数组，所以在这里也需要直接弄成数组，而后才可以去解析
          contact,
          price: this.detail.basicInfo.minPrice
        }
        console.log(this.sku);
        this.setOrder(newOrder)
        // 登录了，前往 订单页
        this.$router.push('/order')

      } else {
        // 判断 购物车里面是否存在该商品，若已存在，就不继续添加到购物车里面了
        let isExist = this.items.find(el => el.id === this.sku.id)
        if (!isExist) {
          // 加入购物车
          Toast('添加成功，请前往购物车结算')
          this.add_cart(this.sku)
        } else {
          Toast('购物车已存在该商品，请勿继续添加')
        }
      }
      // 关闭 点击商品 提示信息
      this.show = false
    },
    // 加入购物车
    ...mapActions('cart', ['add_cart']),
    ...mapMutations('order', ['setOrder'])
  },
  computed: {
    ...mapState({
      items: (state) => state.cart.carts.items,
      contacts: (state) => state.address.contacts
    })
  },
}
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 300px;
}
.money {
  color: red;
  font-size: 16px;
  font-weight: 550;
}
.content {
  /deep/ .wscnph {
    width: 100%;
  }
}
/deep/ .van-card__title {
  margin-top: 40px;
}
/deep/ .van-card__price {
  color: red;
  font-size: 20px;
}
.de-con {
  width: 100%;
  height: 150px;
  background-color: #fff;
  margin: 10px 0;
  position: relative;
  padding: 0 10px;
  .money {
    font-size: 20px;
    margin-bottom: 10px;
  }
  h5 {
    font-size: 16px;
    color: #000;
    font-weight: 550;
  }
  .quit {
    width: 90px;
    padding: 2px 8px;
    background-color: rgba(243, 127, 127, 0.5);
    color: #f66;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
  }
}

/deep/ .van-cell {
  margin: 5px 0;
}
</style>
